{extend name="public/layout"}
{block name="title"}我的权利{/block}
{block name="head"}
<style>
    html, body {
        background-color: #f5f5f5;
    }

    .box img {
        height: 1.248rem;
    }

    .box label {
        text-align: center;
        display: block;
        padding-top: 0.05rem;
    }

    .box {
        text-align: center;
        background-color: #fff;
        border-radius: 6px;
        padding-top: 0.3rem;
        padding-bottom: 0.25rem;
        margin-bottom: 0.2rem;

    }

    .selected {
        position: relative;
    }

    .selected:after {
        content: ' ';
        position: absolute;
        bottom: 0.54rem;
        width: 0.3264rem;
        left: 50%;
        margin-left: 0.5rem;
        height: 0.3264rem;
        background-image: url("/images/icons/selected.png");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .flex-con {
        padding: 0 5px;
    }
</style>
{/block}
{block name="content"}

<div class="plr pb mtl" id="powers">
    <div class="flex">
        <a class="flex-con" href="{:U('coral/index')}">
            <div class="box {$coral_count>0?'selected':''}">
                <img src="/images/icons/coralname.png" alt="">
                <label class="h3">
                    珊瑚命名权
                </label>
            </div>
        </a>
        <a class="flex-con" href="{:U('coralReef/index')}">
            <div class="box {$corals_count>0?'selected':''}">
                <img src="/images/icons/coralsname.png" alt="">
                <label class="h3">
                    珊瑚礁命名权
                </label>
            </div>
        </a>
    </div>
    <div class="flex">
        <a class="flex-con" href="{:U('Coupon/diving')}">
            <div class="box {$coupon0_count>0?'selected':''}">
                <img src="/images/icons/swinggame.png" alt="">
                <label class="h3">
                    潜水活动
                </label>
            </div>
        </a>
        <a class="flex-con" href="{:U('LoveCertificate/index')}">
            <div class="box {$love_count>0?'selected':''}">
                <img src="/images/icons/lovecart.png" style="height:0.9rem;margin-top:0.348rem;" alt="">
                <label class="h3">
                    爱心证书
                </label>
            </div>
        </a>
    </div>
    <div class="flex">
        <a class="flex-con" href="{:U('Coupon/divingTrain')}">
            <div class="box {$coupon1_count>0?'selected':''}">
                <img src="/images/icons/swingtrain.png" alt="">
                <label class="h3">
                    潜水培训
                </label>
            </div>
        </a>
        <a class="flex-con" href="{:U('luck/index')}">
            <div class="box {$luck_count>0?'selected':''}">
                <img src="/images/icons/lovegame.png" alt="">
                <label class="h3">
                    爱心抽奖
                </label>
            </div>
        </a>
    </div>
</div>
{:_js('js/phone.js')}
<script>
    $('#powers').on('click','a',function (evt) {
        var jq = $(this);
        var box = jq.find('.box');
        if(!box.hasClass('selected')){
            var txt = box.find('label').text().trim();
            ui.msg('您还没有'+txt+'的权利');
            evt.preventDefault();
        }
    });
</script>
{/block}